<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${wd}"></title>
    <link rel="stylesheet" th:href="@{/plugins/hp-ui/hp-ui.css}" />
    <link rel="stylesheet" th:href="@{/css/base.css}" />
    <link rel="stylesheet" th:href="@{/css/search/result.css}" />
    <script type="text/javascript" charset="utf-8" th:src="@{/plugins/jquery/jquery-3.4.1.min.js}"></script>
    <script>
        /**
         * 投票
         */
        function support(that) {
            $.post("/s/s/" + $(that).attr("data-id"), function (data) {
                that.innerHTML = ["<span>", data.support, "</span>", "+"].join("")
            })
        }

        function oppose(that) {
            $.post("/s/o/" + $(that).attr("data-id"), function (data) {
                that.innerHTML = ["-", "<span>", data.oppose, "</span>"].join("");
            })
        }
    </script>
</head>
<body>
<header th:replace="~{fragments/header :: header}">...</header>
<div class="container">
    <article>
        <div class="result-wrapper"  th:each="result : ${results.getContent()}">
            <div class="brief-wrapper">
                <h3 class="t"><a th:href="${result.url}" th:text="${result.title}" target="_blank">spinner, Nullpoint Exception</a></h3>
                <div class="content-wrapper">
                    <div class="icon" th:if="${result.logoUrl} != null"><img th:src="${result.logoUrl}" /> </div>
                    <div class="content">
                        <div class="brief" th:utext="${result.brief}">a</div>
                        <div class="info">
                            <a th:href="${result.url}" th:text="${result.url}" target="_blank"></a><span class="placeholder"></span><span class="source"><span th:text="${#dates.format(result.postedTime, 'yyyy-MM-dd')}"></span>&nbsp;&nbsp;<span th:text="${result.author}"></span></span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="votes">
                <div class="vote-wrapper">
                    <div title="同意" class="support" th:attr="data-id=${result.id}"
                         th:onclick="support(this)"><span th:text="${result.support}"></span>+</div>
                </div>
                <div class="vote-wrapper">
                    <div title="反对" class="oppose" th:attr="data-id=${result.id}"
                         th:onclick="oppose(this)">-<span th:text="${result.oppose}"></span></div>
                </div>
            </div>
        </div>

        <style>

        </style>
<!--        &lt;!&ndash; 分页 &ndash;&gt;-->
<!--        <div class="hp-page">-->
<!--            <a th:href="@{'/s?wd=' + ${wd} + '&page=1&page_size=' + ${results.getSize()}}"-->
<!--               th:if="${results.getNumber()} > 0">首页</a>-->

<!--            <a th:href="@{'/s?wd=' + ${wd} + '&page=' + ${results.getNumber()} +  '&page_size=' + ${results.getSize()}}"-->
<!--               th:if="${results.hasPrevious()}">上一页</a>-->

<!--            &lt;!&ndash;-->
<!--            Thymeleaf简单分页：https://blog.csdn.net/qq_32719215/article/details/94400725-->
<!--            Thymeleaf分页组件：https://www.jianshu.com/p/60ac23c092c0-->
<!--            &ndash;&gt;-->
<!--            <a th:href="@{'/s?wd=' + ${wd} + '&page=' + ${pageNum} + '&page_size=' + ${results.getSize()}}"-->
<!--               th:each="pageNum : ${#numbers.sequence(1, results.getTotalPages())}"-->
<!--               th:class="${results.getNumber() + 1 == pageNum} ? 'active'"-->
<!--               th:text="${pageNum}"></a>-->

<!--            <a th:href="@{'/s?wd=' + ${wd} + '&page=' + ${results.getNumber() + 2} +  '&page_size=' + ${results.getSize()}}"-->
<!--               th:if="${results.hasNext()}">下一页</a>-->

<!--            <a th:href="@{'/s?wd=' + ${wd} + '&page=' + ${results.getTotalPages()} + '&page_size=' + ${results.getSize()}}"-->
<!--               th:if="${results.getNumber()} < ${results.getTotalPages() - 1}">末页</a>-->
<!--        </div>-->
        <div th:replace="~{fragments/pagination :: pagination(page=${results}, uri='/s?wd=' + ${wd} + '&')}"></div>
    </article>
</div>
</body>
</html>